// 焦点图设置
<template>
  <Row>
    <Row>
      <Col span="">
      <Button type="primary" size="large" @click="modal2 = true">添加</Button>
      </Col>
    </Row>
    <br>

    <Modal v-model="modal2" title="添加焦点图" @on-ok="ok" @on-cancel="cancel">
      <Form :model="bannerInfo">
        <FormItem label="名称">
          <Input v-model="bannerInfo.name" placeholder="名称"></Input>
        </FormItem>
        <FormItem label="选择活动">
          <Select v-model="bannerInfo.type_id" @on-change="select">
            <Option v-for="item in list" :value="item.id" :key="item.id">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="是否启用">
          <i-Switch v-model="switch1" @on-change="change" />
        </FormItem>
        <FormItem label="上传图片">
          <Upload action="http://upload-z2.qiniup.com" :data="updata" :on-success="files" :on-remove="removeFiles" :on-error="error">
            <Button icon="ios-cloud-upload-outline">上传图片590*212px</Button>
          </Upload>
        </FormItem>
      </Form>
    </Modal>

    <Row>
      <Col span="">
      <Table border :columns="columns7" :data="data6"></Table>
      </Col>
    </Row>
  </Row>

</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      imgs: "",
      updata: {
        key: Date.parse(new Date()) + ".jpg",
        token: ""
      },
      testfile: "testfile",
      switch1: false,
      list: [],
      diqu: "",
      psfs: "",
      modal2: false,
      bannerInfo: {
        name: "",
        type: 2,
        type_id: "",
        status: "",
        create_user: "root",
        img: ""
      },
      formItem: {},
      columns7: [
        {
          title: "焦点图名称",
          key: "name"
        },
        {
          title: "发布时间",
          key: "create_datetime"
        },
        {
          title: "关联活动列表",
          key: "type_id",
          render: (h, params) => {
            let _self = this;
            if (_self.list.length > 0) {
              return _self.list[params.row.type_id].name;
            } else {
              return "";
            }
          }
        },
        {
          title: "状态",
          key: "status",
          render: (h, params) => {
            if (params.row.status == 1) {
              return "已启用";
            } else {
              return "未启用";
            }
          }
        },
        {
          title: "操作",
          key: "id",
          width: 150,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      let _self = this;
                      $.ajax({
                        url: BASE_URL + "bannermanagement/delete",
                        type: "get",
                        data: {
                          id: params.row.id
                        },
                        success: function(e) {
                          console.log(e);
                          if (e) {
                            _self.getBannerList();
                            _self.$Message.success("删除成功");
                          } else {
                            _self.$Message.error("删除失败");
                          }
                        }
                      });
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data6: []
    };
  },
  created() {
    this.getToken();
    this.getHdList();
    this.getBannerList();
  },
  methods: {
    removeFiles: function() {
      this.getToken();
      this.updata.key = Date.parse(new Date()) + ".jpg";
    },
    getToken: function() {
      let _self = this;
      $.ajax({
        url: BASE_URL + "upload/token",
        type: "get",
        success: function(e) {
          _self.updata.token = e;
        }.bind(this)
      });
    },
    error: function(response, file, fileList) {
      console.log(response, file, fileList);
    },
    files: function(res, file) {
      console.log(file);
      console.log(IMAGE_URL + "/" + res.key);
      this.bannerInfo.img = IMAGE_URL + "/" + res.key;
    },

    getBannerList: function() {
      let _self = this;
      $.ajax({
        url: BASE_URL + "bannermanagement/groupBanners",
        type: "get",
        data: {
          type: 2
        },
        success: function(data) {
          console.log(data);
          _self.data6 = data;
        }.bind(this)
      });
    },
    change: function(switch1) {
      let _self = this;
      if (switch1) {
        _self.bannerInfo.status = 1;
      } else {
        _self.bannerInfo.status = 0;
      }
    },
    // handleAdd() {
    //   console.log(this.tag);
    //   if (this.count.length) {
    //     this.count.push({ name: this.tag });
    //     console.log(this.count);
    //   } else {
    //     this.count.push(0);
    //   }
    // },
    // handleClose2(event, name) {
    //   const index = this.count.indexOf(name);
    //   this.count.splice(index, 1);
    // },
    select: function(e) {
      this.bannerInfo.type_id = e;
    },
    getHdList: function() {
      let _self = this;
      $.ajax({
        url: BASE_URL + "activitymanagement/groupActivityTypes",
        type: "get",
        success: function(e) {
          console.log(e);
          _self.list = e;
        }.bind(this)
      });
    },
    ok() {
      // this.$Message.info(this.diqu);
      console.log(this.bannerInfo);
      let _self = this;
      $.ajax({
        url: BASE_URL + "bannermanagement",
        type: "post",
        data: {
          groupBanner: JSON.stringify(_self.bannerInfo)
        },
        success: function(data) {
          console.log(data);
          if (data) {
            _self.getBannerList();
            _self.$Message.success("添加成功");
            _self.bannerInfo = {
              name: "",
              type: 2,
              type_id: "",
              status: "",
              create_user: "root",
              img: ""
            },
              _self.bannerInfo.img = "";
            _self.imgs = "";
            _self.switch1 =false
          } else {
            _self.$Message.error("添加失败");
          }
        }
      });
    },
    cancel() {
      this.$Message.info("Clicked cancel");
    }
  }
};
</script>

<style scoped >
</style>
